import React, { useEffect, useState } from 'react';
import TableHeader from '@/components/TableHeader/TableHeader';
import { useDispatch, useSelector } from "umi";
import SearchContainer from '@/components/SearchContainer/SearchContainer';
import DrawerDetail from '@/components/Drawer/Drawer';
import Dialog from '@/components/Dialog/Dialog';
import AddSalary from "./components/AddSalary"
import SearchForm from "@/components/CommonSearchForm"
import TableLists from './components/TableLists';
import SalaryDetail from "./components/SalaryDetail"
import { setIsShowAdd } from '@/utils/commonFns/commonDispatch';

export default function index() {
    const dispatch = useDispatch();
    const { salarySearch, salaryTotal, salaryLists, salaryDetail } = useSelector(state => state.salary);//搜索内容 总数 数据
    const { isShowAdd } = useSelector(state => state.common);
    const { page, size, queryData } = salarySearch;
    const [closeRight, setcloseRight] = useState(false);
    useEffect(() => {
        _initContentPage();
    }, []);

    // 初始化数据,修改页码
    function _initContentPage(page = 1, queryData = {}) {
        if (typeof queryData !== 'object') {
            queryData = {};
        }
        dispatch({
            type: "salary/initSalaryContent",
            payload: { page, queryData }
        })
    }

    function reload(queryData) {
        _initContentPage(1, queryData)
    }

    return (
        <div className='main-content'>
            {/* 头部定位按钮 */}
            <TableHeader
                total={salaryTotal}
                page={page}
                size={size}
                interfaceDelMethod={"deleteSalary"}
                changeCurrentPage={_initContentPage}
                getNewDatas={() => _initContentPage()}
                openAdd={() => setIsShowAdd(true, dispatch)}
            ></TableHeader>
            {/* 搜索内容 */}
            <SearchContainer renderForm={() => <SearchForm reload={reload}></SearchForm>} closeRight={closeRight} setcloseRight={setcloseRight}></SearchContainer>
            {/* 表格显示 */}
            <TableLists data={salaryLists} changeDiallogValue={_initContentPage}></TableLists>
            {/* 详情展示 */}
            <DrawerDetail
                title={salaryDetail?.staffName?.userName}
                _id={salaryDetail?._id}
                render={() => <SalaryDetail salaryDetail={salaryDetail} _initSalaryList={_initContentPage}></SalaryDetail>}
                reloadFunc={_initContentPage}
                interfaced={"deleteSalary"}
                isStaff={true}
            />
            {/* 新增展示 */}
            <Dialog
                isShowClose={true}
                title={"新增调薪记录"}
                width={800}
                dialogStutus={isShowAdd}
                render={() => <AddSalary setIsShowAdd={(type) => setIsShowAdd(type, dispatch)} _initContentPage={_initContentPage}></AddSalary>}
                setDialogStatus={(type) => setIsShowAdd(type, dispatch)} ></Dialog>
        </div>
    )
}
